<template>
  <div class="pie-echarts">
    <XtEchars :options="pieOptions" height="300px" width="100%"></XtEchars>
  </div>
</template>

<script setup lang="ts">
import { EChartsOption } from "echarts"
import XtEchars from "@/base_ui/echars"
import { defineProps, computed } from "vue"

export interface IDataType {
  value: number
  name: string
}

const props = defineProps<{
  data: IDataType[]
}>()

const pieOptions = computed<EChartsOption>(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "商品分类图",
        type: "pie",
        radius: "50%",
        data: props.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  }
})
</script>
<style lang="less" scoped></style>
